<meta charset="UTF-8">
<div class="pd-10 system" id="add-directive-wraper">
    <h3 class="h3-title">添加指令</h3>
    <div style="width: 700px;margin: 0 auto;">

        <Row style="margin: 10px 0">
            <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">
                <i style="color: red;display: inline-block;">*</i>&nbsp;设备类型 : &nbsp;</i-col>
            <i-col span="20">
                <i-select v-model="deviceType">
                    <i-option v-for="item in deviceTypeList" :value="item.value" :key="item.value">{{ item.label }}</i-option>
                </i-select>
            </i-col>
        </Row>

        <Row style="margin: 10px 0">
            <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">
                <i style="color: red;display: inline-block;">*</i>&nbsp;指令类型 : &nbsp;</i-col>
            <i-col span="20">
                <!-- <i-select v-model="cmdCode" filterable>
                        <i-option v-for="item in listCmdAction" :value="item.value" :key="item.value">{{ item.label }}</i-option>
                    </i-select> -->
                <div class="search-wrapper">
                    <i-input v-model.trim="cmdCodeName" :icon="iconState" :readonly="readonly" @on-change="sosoValueChange" @on-blur="blur" @on-focus="focus" @on-click="focus"></i-input>
                    <transition name="fade">
                        <ul class="search-item-wrapper" v-show="isShowMatchDev" style="cursor: pointer;">
                            <li v-for="item in cmdList" style="padding:5px 10px;" @click="selectedCmd(item)">
                                <div :value="item.value" :key="item.label">
                                    <span style="cursor: pointer;">{{ item.label }}</span>
                                </div>
                            </li>
                        </ul>
                    </transition>
                </div>
            </i-col>
        </Row>


        <Row style="margin: 10px 0">
            <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">指令名称 : &nbsp;</i-col>
            <i-col span="20">
                <i-input v-model.trim="cmdname"></i-input>
            </i-col>
        </Row>

        <Row style="margin:10px 0">
            <i-col span="4" style="height: 100%;text-align:right;line-height:32px;"><i style="color: red;display: inline-block;">*</i>&nbsp;是否同步 : &nbsp;</i-col>
            <i-col span="20" style="height: 100%;line-height:32px;">
                <Checkbox v-model="isSync">(选中为同步)</Checkbox>
            </i-col>
        </Row>


        <Row style="margin:10px 0">
            <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">指令描述 : &nbsp;</i-col>
            <i-col span="20">
                <i-input v-model.trim="cmddescr"></i-input>
            </i-col>
        </Row>

        <Row style="margin:10px 0">
            <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">指令密码 : &nbsp;</i-col>
            <i-col span="20">
                <i-input v-model.trim="cmdpwd"></i-input>
            </i-col>
        </Row>

        <Row style="margin: 10px 0">
            <i-col span="4" style="height: 100%;text-align:right;line-height:32px;">参数类型 : &nbsp;</i-col>
            <i-col span="20">
                <i-select v-model="selectParamType">
                    <i-option value="text">文本输入</i-option>
                    <i-option value="list">下拉选择</i-option>
                    <i-option value="timeperiod">时间段</i-option>
                    <i-option value="remind">闹钟</i-option>
                    <i-option value="time">时间</i-option>
                    <i-option value="weektime">星期时间</i-option>
                    <i-option value="weekperiod">星期时间段</i-option>
                </i-select>
            </i-col>
        </Row>

        <Row style="margin: 10px 0">
            <i-col span="4" style="height: 100%;text-align:right;line-height:100%;">
                参数 : &nbsp;</i-col>
            <i-col span="20">
                <i-input v-model="params" type="textarea" :rows="8" />
            </i-col>
        </Row>

        <Row style="margin: 10px 0">
            <i-col span="4" style="height: 100%;text-align:right;line-height:100%;">预览 : &nbsp;</i-col>
            <i-col span="20" v-if="selectParamType==='text'">
                <Row style="margin: 5px 0" v-for="item in previewObjList" :key="item.text">
                    <i-col span="5" style="height: 100%;text-align:right;line-height:32px;">
                        {{item.title}} : &nbsp;
                    </i-col>
                    <i-col span="15">
                        <i-input v-model.trim="item.value"></i-input>
                    </i-col>
                </Row>
            </i-col>
            <i-col span="20" v-if="selectParamType==='list'">
                <Row style="margin: 5px 0">
                    <i-col span="15" offset="5">
                        <i-select v-model="preview">
                            <i-option v-for="item in previewObjList" :value="item.type" :key="item.type">{{ item.value }}</i-option>
                        </i-select>
                    </i-col>
                </Row>
            </i-col>
            <i-col span="20" v-if="selectParamType==='timeperiod'">
                <Row style="margin: 5px 0">
                    <i-col span="15" offset="5">
                        <p v-for="item in previewObjList" :key="item.type" style="margin: 5px 0">
                            {{item.title}} : &nbsp;
                            <Time-Picker format="HH:mm" :value="item.formatValue" type="timerange" placeholder="选择时间段"></Time-Picker>
                        </p>
                    </i-col>
                </Row>
            </i-col>
            <i-col span="20" v-if="selectParamType==='remind'">
                <Row style="margin: 5px 0">
                    <i-col span="15" offset="5">
                        <p v-for="item in previewObjList" :key="item.type" style="margin: 5px 0">
                            <Row>
                                <i-col span="16">
                                    <Time-Picker format="HH:mm" placeholder="选择时间"></Time-Picker>
                                </i-col>
                                <i-col span="8" style="height: 100%;line-height:32px;">
                                    <i-switch />
                                </i-col>
                            </Row>
                            <Row style="margin: 10px 0">
                                <i-col span="16">
                                    <Radio-Group>
                                        <Radio label="1"> <span>一次</span></Radio>
                                        <Radio label="2"> <span>每天</span></Radio>
                                        <Radio label="3"><span>每周</span></Radio>
                                    </Radio-Group>
                                </i-col>
                            </Row>
                            <Row style="margin: 10px 0">
                                <i-col span="24">
                                    <CheckboxGroup>
                                        <Checkbox label="一"><span>一</span></Checkbox>
                                        <Checkbox label="二"><span>二</span></Checkbox>
                                        <Checkbox label="三"><span>三</span></Checkbox>
                                        <Checkbox label="四"><span>四</span></Checkbox>
                                        <Checkbox label="五"><span>五</span></Checkbox>
                                        <Checkbox label="六"><span>六</span></Checkbox>
                                        <Checkbox label="日"><span>日</span></Checkbox>
                                    </CheckboxGroup>
                                </i-col>
                            </Row>
                        </p>
                    </i-col>
                </Row>
            </i-col>

            <i-col span="20" v-if="selectParamType==='time'">
                <Row style="margin: 5px 0">
                    <i-col span="15" offset="5">
                        <p v-for="item in previewObjList" :key="item.type" style="margin: 5px 0">
                            {{item.title}} : &nbsp;
                            <Time-Picker format="HH:mm" type="time" :value="item.value" placeholder="选择时间"></Time-Picker>
                        </p>
                    </i-col>
                </Row>
            </i-col>

            <i-col span="20" v-if="selectParamType==='weektime'">
                <Row style="margin: 5px 0">
                    <i-col span="15" offset="5">
                        <p v-for="item in previewObjList" :key="item.type" style="margin: 5px 0">
                            <Row style="margin: 10px 0">
                                <i-col span="24">
                                    {{item.title}} &nbsp;
                                    <Time-Picker format="HH:mm" type="time" placeholder="选择时间" v-model="item.time"></Time-Picker>
                                </i-col>
                            </Row>
                            <Row style="margin: 10px 0">
                                <i-col span="24">
                                    <Checkbox-Group v-model="item.weekselected">
                                        <Checkbox label="一"><span>一</span></Checkbox>
                                        <Checkbox label="二"><span>二</span></Checkbox>
                                        <Checkbox label="三"><span>三</span></Checkbox>
                                        <Checkbox label="四"><span>四</span></Checkbox>
                                        <Checkbox label="五"><span>五</span></Checkbox>
                                        <Checkbox label="六"><span>六</span></Checkbox>
                                        <Checkbox label="日"><span>日</span></Checkbox>
                                    </Checkbox-Group>
                                </i-col>
                            </Row>
                        </p>
                    </i-col>
                </Row>
            </i-col>

            <i-col span="20" v-if="selectParamType==='weekperiod'">
                <Row style="margin: 5px 0">
                    <i-col span="15" offset="5">
                        <p v-for="(item,index) in previewObjList" style="margin: 5px 0" :key="index">
                            <Row style="margin: 10px 0" v-if="item.type=='week'">
                                <i-col span="24">
                                    <Checkbox-Group v-model="item.weekselected">
                                        <Checkbox label="一"><span>一</span></Checkbox>
                                        <Checkbox label="二"><span>二</span></Checkbox>
                                        <Checkbox label="三"><span>三</span></Checkbox>
                                        <Checkbox label="四"><span>四</span></Checkbox>
                                        <Checkbox label="五"><span>五</span></Checkbox>
                                        <Checkbox label="六"><span>六</span></Checkbox>
                                        <Checkbox label="日"><span>日</span></Checkbox>
                                    </Checkbox-Group>
                                </i-col>
                            </Row>
                            <Row style="margin: 10px 0" v-else>
                                <i-col span="24">
                                    {{item.title}} &nbsp;
                                    <Time-Picker format="HH:mm" :value="item.time" type="timerange" placeholder="选择时间段"></Time-Picker>
                                </i-col>
                            </Row>
                        </p>
                    </i-col>
                </Row>
            </i-col>

        </Row>
        <Row style="margin: 10px 0">
            <i-col span="10" :offset="8">
                <i-button icon="md-add" @click="handleAddDirective" style="width: 100%">添加</i-button>
            </i-col>
        </Row>
        <div style="display:none;">aaa-{{aaa}}</div>
    </div>
    <script>
        vueInstanse = new Vue({
            el: "#add-directive-wraper",

            data: function() {
                return {
                    readonly: true,
                    iconState: "ios-arrow-down",
                    timeoutIns: null,
                    cmdname: "",
                    cmdnameen: "",
                    cmdnametw: "",
                    cmdpwd: "",
                    cmddescr: null,
                    cmddescren: "",
                    cmddescrtw: "",

                    params: "",
                    paramsen: "",
                    paramstw: "",
                    previewObjList: [],
                    isSync: false,
                    kong: "",
                    deviceType: "",
                    cmdCode: "",
                    cmdCodeName: "",
                    deviceTypeList: [],
                    listCmdAction: [],
                    cmdList: [],
                    isShowMatchDev: false,
                    selectParamType: null,
                    preview: null,
                }
            },
            watch: {
                // params:function () {
                //     this.previewObjList = [];
                //     console.log('params2', this.params)
                //     if(this.replaceAll(this.params) == ""){
                //         var params = "<params>"+ this.params +"</params>";
                //         var parser=new DOMParser(); 
                //         var xmlDoc=parser.parseFromString(params,"text/xml"); 
                //         this.parseXML(xmlDoc);
                //     }
                // }
            },
            computed: {
                aaa: function() {
                    this.previewObjList = [];
                    if (this.checkFormatCorrect(this.params)) {
                        var params = "<params>" + this.params + "</params>";
                        var parser = new DOMParser();
                        var xmlDoc = parser.parseFromString(params, "text/xml");
                        this.parseXML(xmlDoc);
                    };
                    return this.params + 1;
                }
            },
            methods: {
                handleAddDirective: function() {
                    if (!this.deviceType) {
                        this.$Message.error("请选择设备类型");
                        return;
                    }

                    if (!this.cmdCode) {
                        this.$Message.error("请选择指令");
                        return;
                    }
                    var me = this;
                    var url = myUrls.addCmd();
                    var data = {
                        devicetype: this.deviceType,
                        cmdcode: this.cmdCode,
                        paramsen: "",
                        paramstw: "",
                        cmddescren: "",
                        cmddescrtw: "",
                        cmdname: this.cmdname,
                        sync: this.isSync ? 1 : 0
                    };

                    if (this.cmddescr) {
                        data.cmddescr = this.cmddescr;
                    };

                    if (this.params) {
                        if (this.checkFormatCorrect(this.params.trim())) {
                            data.params = this.params;
                        } else {
                            this.$Message.error("参数格式错误");
                            return;
                        }
                    }
                    if (this.selectParamType) {
                        data.cmdtype = this.selectParamType;
                    }

                    data.cmdpwd = this.cmdpwd;

                    utils.sendAjax(url, data, function(resp) {
                        if (resp.status == 0) {
                            me.$Message.success("添加成功");
                        } else {
                            me.$Message.error(resp.cause);
                        };
                    });
                },
                checkFormatCorrect: function(str) {
                    if (str)
                        str = str.replace(/^<[\s\S]*>[\s\S]*<\/[\s\S]*>$/g, "");
                    return str == "" ? true : false;
                },
                parseXML: function(xmlDoc) {
                    // <ha><param size="small" type="password">确认密码</param></ha>
                    var parent = xmlDoc.children[0];
                    var children = parent.children;
                    for (var i = 0; i < children.length; i++) {
                        var item = children[i]
                        var title = item.innerHTML;
                        var value = item.getAttribute("value");
                        var type = item.getAttribute("type");
                        var previewObj = null;
                        if (type) {
                            if (this.selectParamType === 'timeperiod') {
                                value = value || "00:00-00:00";
                                var formatValue = value.split("-");
                                previewObj = {
                                    type: type,
                                    value: value,
                                    title: title,
                                    formatValue: formatValue
                                };
                            } else if (this.selectParamType === 'weektime') {
                                var formatValue = value.split("-");
                                var weekStr = formatValue[1],
                                    weekselected = [];
                                var week1 = weekStr.charAt(0) == 1 ? '一' : false;
                                var week2 = weekStr.charAt(1) == 1 ? '二' : false;
                                var week3 = weekStr.charAt(2) == 1 ? '三' : false;
                                var week4 = weekStr.charAt(3) == 1 ? '四' : false;
                                var week5 = weekStr.charAt(4) == 1 ? '五' : false;
                                var week6 = weekStr.charAt(5) == 1 ? '六' : false;
                                var week7 = weekStr.charAt(6) == 1 ? '日' : false;

                                week1 && weekselected.push(week1);
                                week2 && weekselected.push(week2);
                                week3 && weekselected.push(week3);
                                week4 && weekselected.push(week4);
                                week5 && weekselected.push(week5);
                                week6 && weekselected.push(week6);
                                week7 && weekselected.push(week7);
                                previewObj = {
                                    type: type,
                                    time: formatValue[0],
                                    weekselected: weekselected,
                                    title: title
                                };
                            } else if (this.selectParamType === 'weekperiod') {
                                if (type == 'week') {
                                    var weekStr = value,
                                        weekselected = [];
                                    var week1 = weekStr.charAt(0) == 1 ? '一' : false;
                                    var week2 = weekStr.charAt(1) == 1 ? '二' : false;
                                    var week3 = weekStr.charAt(2) == 1 ? '三' : false;
                                    var week4 = weekStr.charAt(3) == 1 ? '四' : false;
                                    var week5 = weekStr.charAt(4) == 1 ? '五' : false;
                                    var week6 = weekStr.charAt(5) == 1 ? '六' : false;
                                    var week7 = weekStr.charAt(6) == 1 ? '日' : false;
                                    week1 && weekselected.push(week1);
                                    week2 && weekselected.push(week2);
                                    week3 && weekselected.push(week3);
                                    week4 && weekselected.push(week4);
                                    week5 && weekselected.push(week5);
                                    week6 && weekselected.push(week6);
                                    week7 && weekselected.push(week7);
                                    previewObj = {
                                        type: type,
                                        weekselected: weekselected,
                                        title: title
                                    };
                                } else {
                                    var formatValue = value.split("-");
                                    previewObj = {
                                        type: type,
                                        time: formatValue,
                                        title: title
                                    };
                                }

                            } else {
                                previewObj = {
                                    type: type,
                                    value: value,
                                    title: title
                                };
                            }
                            this.previewObjList.push(previewObj);
                        }
                    }
                },
                getDeviceType: function() {
                    var me = this;
                    var url = myUrls.queryDeviceTypeByUser();
                    utils.sendAjax(url, {}, function(resp) {
                        if (resp.status == 0 && resp.devicetypes != null) {
                            resp.devicetypes.forEach(function(item) {
                                me.deviceTypeList.push({
                                    value: item.devicetypeid,
                                    label: item.typename + ' - ' + item.remark
                                });
                            })
                        }
                    });
                },
                getListCmdAction: function() {
                    var me = this;
                    var url = myUrls.listCmdAction();
                    utils.sendAjax(url, {}, function(resp) {
                        if (resp.status == 0) {
                            resp.cmds.forEach(function(item) {
                                var cmdName = item.cmdName;
                                var firstLetter = __pinyin.getFirstLetter(cmdName);
                                var pinyin = __pinyin.getPinyin(cmdName);
                                me.listCmdAction.push({
                                    value: item.cmdCode,
                                    label: cmdName,
                                    firstLetter: firstLetter,
                                    pinyin: pinyin
                                });
                            });
                            me.cmdList = me.listCmdAction;
                        }
                    });
                },
                sosoValueChange: function() {
                    var me = this;
                    var value = this.cmdCodeName;

                    if (this.timeoutIns != null) {
                        clearTimeout(this.timeoutIns);
                    }

                    if (!value.trim()) {
                        this.cmdList = this.listCmdAction;
                        return;
                    }

                    this.timeoutIns = setTimeout(function() {
                        me.filterMethod(value);
                    }, 300);
                },
                focus: function() {
                    this.readonly = false;
                    this.isShowMatchDev = true;
                },
                blur: function() {
                    this.readonly = true;
                    var me = this
                    setTimeout(function() {
                        me.isShowMatchDev = false;
                    }, 300)
                },
                selectedCmd: function(item) {
                    var me = this;
                    setTimeout(function() {
                        me.isShowMatchDev = false;
                        me.cmdCodeName = item.label;
                        me.cmdCode = item.value;
                    }, 300)
                },
                filterMethod: function(value) {
                    var list = [];
                    value = value.toLowerCase();
                    this.listCmdAction.forEach(function(itme) {
                        if (
                            itme.label.indexOf(value) != -1 ||
                            itme.firstLetter.indexOf(value) != -1 ||
                            itme.pinyin.indexOf(value) != -1
                        ) {
                            list.push(itme);
                        }
                    })
                    this.cmdList = list;
                }
            },
            watch: {
                isShowMatchDev: function() {
                    if (!this.isShowMatchDev) {
                        this.iconState = "ios-arrow-down";
                    } else {
                        this.iconState = "ios-arrow-up";
                    }
                }
            },
            mounted: function() {
                this.getDeviceType();
                this.getListCmdAction();
            }
        })
    </script>
</div>